<template>
  <div class="app-container">
    <el-card class="welcome-card">
      <h2>欢迎使用养老院管理系统</h2>
      <p>当前角色：{{ roleName }}</p>
    </el-card>

    <div class="dashboard-grid">
      <!-- 公共卡片 -->
      <el-card 
        v-for="item in commonMenus" 
        :key="item.path"
        class="menu-card"
        shadow="hover"
        @click="navigateTo(item.path)"
      >
        <div class="card-content">
          <el-icon :size="40" :color="item.color"><component :is="item.icon" /></el-icon>
          <h3>{{ item.title }}</h3>
          <p class="desc">{{ item.desc }}</p>
        </div>
      </el-card>

      <!-- 角色专属卡片 -->
      <el-card 
        v-for="item in roleMenus" 
        :key="item.path"
        class="menu-card"
        shadow="hover"
        @click="navigateTo(item.path)"
      >
        <div class="card-content">
          <el-icon :size="40" :color="item.color"><component :is="item.icon" /></el-icon>
          <h3>{{ item.title }}</h3>
          <p class="desc">{{ item.desc }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  Notebook,
  Bell,
  ChatLineRound,
  Setting,
  FirstAidKit,
  Calendar,
  List,
  Postcard
} from '@element-plus/icons-vue'

const router = useRouter()

// 获取用户角色（示例，需根据实际登录信息调整）
const userRole = ref('elder') // 可能的值：elder | family | staff

// 角色映射
const roleConfig = {
  elder: {
    name: '老人用户',
    menus: [
      { path: '/health', title: '健康档案', desc: '查看健康记录和体检报告', icon: FirstAidKit, color: '#67C23A' },
      { path: '/schedule', title: '活动安排', desc: '查看每日活动计划', icon: Calendar, color: '#409EFF' },
      { path: '/service', title: '服务预约', desc: '预约护理和医疗服务', icon: Postcard, color: '#E6A23C' }
    ]
  },
  family: {
    name: '家属用户', 
    menus: [
      { path: '/elder-info', title: '老人信息', desc: '查看老人基本信息', icon: User, color: '#409EFF' },
      { path: '/health', title: '健康动态', desc: '查看老人健康数据', icon: FirstAidKit, color: '#67C23A' },
      { path: '/contact', title: '联系护工', desc: '与护理人员沟通', icon: ChatLineRound, color: '#E6A23C' }
    ]
  },
  staff: {
    name: '护工用户',
    menus: [
      { path: '/task', title: '任务管理', desc: '查看护理任务清单', icon: List, color: '#409EFF' },
      { path: '/health-report', title: '健康上报', desc: '记录老人健康数据', icon: FirstAidKit, color: '#67C23A' },
      { path: '/schedule', title: '值班安排', desc: '查看工作排班表', icon: Calendar, color: '#E6A23C' }
    ]
  }
}

// 公共菜单项
const commonMenus = ref([
  { path: '/settings', title: '个人设置', desc: '修改账户信息', icon: Setting, color: '#909399' }
])

// 计算属性
const roleName = computed(() => roleConfig[userRole.value].name)
const roleMenus = computed(() => roleConfig[userRole.value].menus)

const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.welcome-card {
  margin-bottom: 20px;
  text-align: center;
}

.dashboard-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.menu-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.menu-card:hover {
  transform: translateY(-5px);
}

.card-content {
  padding: 20px;
  text-align: center;
}

.card-content h3 {
  margin: 15px 0 10px;
  color: #303133;
}

.desc {
  color: #606266;
  font-size: 0.9em;
  line-height: 1.5;
}
</style>
